<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <h1>当前的数字是{{$store.state.count}}</h1>
        <span>{{$store.getters.format}}</span>
        <sum-number></sum-number>
        <reduce-number></reduce-number>
    </div>
    <script src="./vue.js"></script>
    <script src="./vuex.js"></script>
    <script>
        // 加的组件
        Vue.component('sum-number',{
            template:`
                <div>
                    <h1>当前加完的数字是：{{$store.state.count}}</h1>
                    <button @click="add">加1</button>
                </div>
            `,
            methods:{
                add(){
                    this.$store.commit('add',5);
                }
            }
        })

        //减的组件
        Vue.component('reduce-number',{
            template:`
                <div>
                    <h1>当前减完的数字是：{{$store.state.count}}</h1>
                    <button @click="reduce">减1</button>
                </div>
            `,
            methods:{
                reduce(){
                    this.$store.commit('reduce',10);    
                }
            }
        })

        //创建一个store的实例
        let store = new Vuex.Store({
            state:{  //维护的是共享的数据，相当于vue实例里的data数据
                count:1   
            },
            mutations:{ //放的是修改state数据的方法，方法接受的第一个参数是state
                add:function(state,num){
                    state.count += num;
                    console.log(this.state===state); //true
                },
                reduce(state,num){
                    state.count -= num;
                }
            },
            getters:{ //类似于vue实例里的computed属性
                format(state,two){
                    console.log(store.getters === two) //true
                    return `format${state.count}`
                }
            },
            actions:{
                getData(one,two){
                    console.log(one)
                    console.log(this);
                }
            }

            /**
                getters中放的是函数，理解成属性

                第一个参数是：state  第二个参数：getters对象
            */ 
        })

        let vm = new Vue({
            el:'#app',
            data(){
                return {
                    // count:1
                }
            },
            store:store  
            // 把store注入到vue实例内，可以在vue实例和其所有的子组件内都使用该store
            // 在子组件内使用store的方式是：该store会被挂载到所有组件实例对象的$store上
        })
    </script>
</body>
</html>